<template>
    <div>
      <el-dialog
        title="修改基本信息"
        :visible.sync="showDialog"
        width="50%"
        @close="handleClose">
        <el-row :gutter="15">
          <el-form ref="elForm" :model="user" :rules="rules" size="medium" label-width="100px">
            <el-upload
              class="upload-demo"
              action="string"
              :http-request="handlePreview"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击修改头像</el-button>
              <div slot="tip" class="el-upload__tip">
                <img v-if="hidden" :src=user.avatar alt="" style="width: 80px;height: 80px">
                <div>只能上传jpg/png文件，且不超过500kb</div>
              </div>
            </el-upload>
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username" placeholder="请输入用户名" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="user.nickname" placeholder="请输入昵称" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生日" prop="birth">
                <el-input v-model="user.birth" placeholder="请输入生日" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="user.sex" size="medium">
                  <el-radio label="0" value="0">男</el-radio>
                  <el-radio label="1" value="1">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <span slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">取 消</el-button>
            <el-button type="primary" @click="doUpdate">确 定</el-button>
        </span>

      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'updateInfo',
    // 接受父组件传递的值
    props:{
      updateVisible:{
        type: Boolean,
        default: false
      }
    },
    data(){
      return{
        user: {
          userId:'',
          username: '',
          nickname: '',
          birth: '',
          sex: '',
          avatar:'',
        },
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          nickname: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }],
          birth: [{
            required: true,
            message: '请输入生日',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'change'
          }],
        },
        // 控制弹出框显示隐藏
        showDialog:false,
        hidden:true,
      }
    },
    mounted () {
      this.selectUser();
    },
    methods:{
      selectUser(){
        const user = JSON.parse(window.sessionStorage.getItem('user'));
        this.user=user;
      },
      // 弹出框关闭后触发
      handleClose(){
        // 子组件调用父组件方法，并传递参数
        this.$emit('changeShow','false')
      },
      //上传图片
      handlePreview(item) {
        console.log(item);
        console.log("轮到我了")
        let formData = new FormData()
        formData.append('file', item.file);
        this.hidden=false;
        this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
            this.user.avatar=resp.obj;
            this.$parent.drawer=false;
          }
        })
      },

      //删除图片
      handleRemove() {
        this.hidden=true;
        let formData = new FormData()
        formData.append('file', this.formData.avatar)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
      doUpdate(){
        let url = '/per/data/updateMessage/?userId='+this.user.userId +'&&enabled='+this.user.enabled+'&&birth='+this.user.birth +'&&nickname='+this.user.nickname+'&&username='+this.user.username +'&&sex='+this.user.sex;
        this.putRequest(url).then(resp=>{
          if (resp){
            this.$notify.success({ title: '成功', message: '修改成功' });
            this.showDialog=false;
          }
        })
      },
    },
    watch:{
      // 监听 updateVisible 改变
      updateVisible(oldVal,newVal){
        this.showDialog = this.updateVisible
      },
    }
  }
</script>

<style scoped>
.upload-demo{
  margin-left: 50px;
  margin-bottom: 30px;
}
</style>
